<template>
  <div class="already-login">
    <div class="top_user">
      <div class="user_info">
        <div class="user_avatar">
          <van-image
            height="65px"
            round
            :src="userInfo.photo"
            width="65px"
            @click="$router.push(`/detail/${userInfo.id}`)"
          />
        </div>
        <div class="user_name">{{userInfo.name}}</div>
        <div class="updata_info">
          <van-button
            size="mini"
            type="default"
            @click="$router.push('/profile/editor')"
          >编辑资料</van-button>
        </div>
      </div>
      <div class="all_count">
        <van-grid :border="false">
          <van-grid-item>
            <div class="span">{{userInfo.art_count}}</div>
            <div class="text">头条</div>
          </van-grid-item>
          <van-grid-item @click="goFFans(0)">
            <div class="span">{{userInfo.follow_count}}</div>
            <div class="text">关注</div>
          </van-grid-item>
          <van-grid-item  @click="goFFans(1)">
            <div class="span">{{userInfo.fans_count}}</div>
            <div class="text">粉丝</div>
          </van-grid-item>
          <van-grid-item>
            <div class="span">{{userInfo.like_count}}</div>
            <div class="text">获赞</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <public />
    <van-cell
      @click="onLogout"
      value="退出登录"
    />
  </div>
</template>

<script>
import Public from "./public";
import { getUserInfo } from "../../../network/user";
import { mapMutations } from "vuex";
import storage from '../../../utils/storage'

export default {
  name: "AlreadyLogin",
  components: {
    Public
  },
  computed: {},
  data() {
    return {
      userInfo: {}
    };
  },
  created() {
    this.loadCurrentUser();
  },
  methods: {
    ...mapMutations(["setUserInfo","removeUser"]),
    async loadCurrentUser() {
      const result = await getUserInfo();
      // console.log(result);
      if ((result.message = "OK")) {
        this.setUserInfo(result.data);
        storage.setItem("USER_INFO",result.data)
        this.userInfo = result.data;
        return;
      }
      this.$toast.fail("获取用户信息失败");
    },
    //退出登录
    onLogout() {
      this.$dialog.confirm({
        message: "确认退出？"
      })
        .then(() => {
          //清除USER_TOKEN和用户信息
          storage.removeItem("USER_TOKEN")
          storage.removeItem("USER_INFO")
          this.removeUser()
          this.userInfo = {}
          //跳转到登录页面
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        });
    },
    //去到关注/粉丝页面
    goFFans(type) {
      this.$router.push({name:'ffans',params:{type}})
    }
  }
};
</script>

<style scoped lang="stylus">
.top_user
  background-image url('http://toutiao.m.lipengzhou.com/img/banner.d43e3812.png')
  background-size cover
  background-repeat no-repeat
  height 182px
  display flex
  flex-direction column
  justify-content space-between

  .user_info
    padding 0 20px
    display flex
    justify-content space-between
    align-items center
    height 112px
    padding-top 20px

    .user_name
      text-align left
      flex 1
      margin-left 15px
      font-size 16px
      color #fff

.van-button
  border-radius 15px

.all_count
  /deep/ .van-grid-item__content
    background-color unset
    color #fff
    font-size 15px

.van-cell
  margin-top 10px

  /deep/ .van-cell__value--alone
    text-align center
</style>